<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Android 震动测试1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        span{
            font-size: .4831rem;
            margin-top: .4831rem;
            margin-bottom: .4831rem;
        }
        form{
            /**/
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: .4831rem;
        }
        .field1{
            
            width: 90%;
            font-size: .3865rem;
            text-align: center;
            padding: .2415rem;
            /*
            display: flex;
            flex-direction: column;
            align-items: center;*/
        }
        .field1 legend{
            font-size: .3623rem;
            color: #7c7c7c;
        }
        .btn1{
            width: 1.9324rem;
            height: .7246rem;
            margin-top: .4831rem;

        }
        output{
            display: inline-block;
            width: 1.2077rem;
            text-align: end;
        }
        .danwei{
            display: inline-block;
            width: 1.087rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <span>Android 震动测试</span>
    <form action="" oninput="c.value=parseInt(a.value)">
        <fieldset class="field1">
            <legend>自定义测试1</legend>
            震动
            <input type="range" name="" id="a" min="0" max="2000">
            <output name="c">1000</output>ms
            <br>
            <button type="button" onclick="f1()" class="btn1">确定</button>


        </fieldset>


        





    </form>
    <form action="" oninput="c.value=parseInt(a1.value);d.value=parseInt(b.value);e.value=parseInt(c1.value)">
        <fieldset class="field1">
            <fieldset class="field1">
                <legend>自定义测试2</legend>
                震动
                <input type="range" name="" id="a1" min="0" max="2000">
                <output name="c">1000</output><span class="danwei">ms</span> 
                <br>
                静息
                <input type="range" name="" id="c1" min="100" max="2000" value="1000">
                <output name="e">1000</output><span class="danwei">ms</span> 
                <br>
                周期
                <input type="range" name="" id="b" min="1" max="10" value="1">
                <output name="d">1</output><span class="danwei">次</span>
                <br>
                <button type="button" onclick="f2()" class="btn1">确定</button>
    
    
            </fieldset>

        </fieldset>


        





    </form>
    
    <script>
        function f1(){
            var t1 = document.querySelector("#a").value
            //Vibration接口用于在web浏览器中发出指令，让移动端设备振动。其中要判断是否支持此方法
            function vibration() {
                navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
                if (navigator.vibrate) {
                    return true;
                }else{
                    return false;
                }
            }
            //[震动时间，停止时间，震动时间，停止时间…] 
            //[200,100,200, 200,100, 200.........]
            if (vibration()==true){
                //alert("设备支持震动测试")
                //navigator.vibrate([200,100,200,100,200]);
                navigator.vibrate(t1);
                console.log("t1="+t1)
            }else{
                alert("设备不支持震动测试")
            }   
        }




        function f2(){
            var t2 = document.querySelector("#a1").value
            var t3 = document.querySelector("#c1").value
            var t4 = document.querySelector("#b").value
            //Vibration接口用于在web浏览器中发出指令，让移动端设备振动。其中要判断是否支持此方法
            function vibration() {
                navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
                if (navigator.vibrate) {
                    return true;
                }else{
                    return false;
                }
            }
            //[震动时间，停止时间，震动时间，停止时间…] 
            //[200,100,200, 200,100, 200.........]
            if (vibration()==true){
                //alert("设备支持震动测试")
                //navigator.vibrate([200,100,200,100,200]);
                //navigator.vibrate(t1);
                console.log("t2="+t2)
                console.log("t3="+t3)
                console.log("t4="+t4)
                console.log("|||||||||||||||")
                var T = [t2, t3]
                for(var i = 1;i < t4;i++){
                    //console.log(i)
                    T=T.concat([t2, t3]);
                }
                console.log("T:"+T)
                console.log("[T]:"+[T])
                console.log("数组转化")
                console.log(Object.values(T))
                console.log("typeof"+typeof Object.values(T))
                //console.log("typeof T:"+typeof T)
                //console.log("T[2]:"+typeof T[2])
                navigator.vibrate(Object.values(T));












            }else{
                alert("设备不支持震动测试")
            }   
        }














    
    </script>
    
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>       
</body>
</html>
